<template>
	<div class="floating-point-content">
		<img :src="backgroundImage" alt="" class="floating-point-img" />
		<div v-for="(item, i) in dotArray" :key="i" class="shoppable-image-item" :style="{ left: `${item.xaxis}%`, top: `${item.yaxis}%` }">
			<div :class="{ active: item.active, 'floating-point-dot-box': true }">
				<span class="index">{{ i + 1 }}</span>
			</div>
			<div :class="getClassName(item.placementByDot)" @click="handleClickDot(item)">
				<div class="tooltip-h1">{{ item.itemName }}</div>
				<div class="tooltip-h2">{{ item.itemType }}</div>
				<div class="tooltip-price">{{ item.itemPrice }}</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'FloatingPoint',
	props: {
		// 背景图片
		backgroundImage: {
			type: String,
			default: () => '',
		},
		// 传入的点列表
		dotArray: {
			type: Array,
			default: () => [],
			// Item
			// active:boolean,          是否选中
			// itemName:string,         名字
			// itemType:string,         类别
			// itemPrice:string,        价格
			// xaxis: Number,  传入坐标的左百分比
			// yaxis: Number,   传入坐标的上百分比
			// placementByDot: String   弹窗显示基于小白点的位置 "top" | "left" | "right" | "bottom"
		},
	},
	computed: {
		getClassName() {
			return (placementByDot) => {
				let className = 'shoppable-image-tooltip shoppable-image-tooltip-top';
				switch (placementByDot) {
					case 'top':
						className = 'shoppable-image-tooltip shoppable-image-tooltip-top';
						break;
					case 'left':
						className = 'shoppable-image-tooltip shoppable-image-tooltip-left';
						break;
					case 'right':
						className = 'shoppable-image-tooltip shoppable-image-tooltip-right';
						break;
					case 'bottom':
						className = 'shoppable-image-tooltip shoppable-image-tooltip-bottom';
						break;
					default:
						break;
				}
				return className;
			};
		},
	},
	mounted() {},
	methods: {
		handleClickDot(item) {
			console.log(item);
		},
	},
};
</script>

<style lang="scss" scoped>
.floating-point-content {
	position: relative;
	cursor: pointer;
	.floating-point-img {
		width: 100%;
		height: auto;
	}
	.shoppable-image-item {
		position: absolute;
		cursor: pointer !important;
		.floating-point-dot-box {
			cursor: pointer;
			transition: border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
			transform: translateX(-50%) translateY(-50%);
			padding: 0;
			width: 32px;
			height: 32px;
			border: 2px solid transparent;
			position: absolute;
			background: rgba(17, 17, 17, 0.2);
			border-radius: 64px;
			display: flex;
			align-items: center;
			justify-content: center;
			// visibility: none;
			// opacity: 0;
			.index {
				position: absolute;
				z-index: 1;
				color: red;
			}
			&::before {
				content: '';
				position: absolute;
				top: -8px;
				left: -8px;
				right: -8px;
				bottom: -8px;
				display: block;
			}
			&::after {
				content: '';
				transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out, -o-transform 0.25s ease-in-out;
				position: relative;
				display: block;
				background: #fff;
				box-shadow: 0 1px 4px rgb(0, 0, 0, 0.55);
				width: 12px;
				height: 12px;
				border-radius: 50%;
			}
			&:hover,
			&.active {
				border-color: hsla(0, 0%, 100%, 0.5);
				+ .shoppable-image-tooltip {
					opacity: 0.9;
					z-index: 8;
				}
				&::after {
					transform: scale(0.667);
				}
			}
		}
		@media screen and (min-width: 1200px) {
			.shoppable-image-tooltip {
				&.shoppable-image-tooltip-top {
					transform: translate(-50%, -115%);
				}
				&.shoppable-image-tooltip-left {
					transform: translate(-112%, -50%);
				}
				&.shoppable-image-tooltip-right {
					transform: translate(20px, -50%);
				}
				&.shoppable-image-tooltip-bottom {
					transform: translate(-50%, 20px);
				}
				opacity: 0;
				position: relative;
				z-index: -100;
				min-width: 155px;
				max-width: 205px;
				height: auto;
				background: #ffffff;
				border-radius: 10px;
				display: flex;
				padding: 20px;
				flex-direction: column;
				transition: border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
				&:hover {
					opacity: 0.9;
					z-index: 8;
				}
				.tooltip-h1 {
					font-size: 18px;
					font-weight: bold;
					color: #1f1f1f;
					line-height: 25px;
				}
				.tooltip-h2 {
					font-size: 14px;
					font-weight: 400;
					color: #8a8a8a;
					line-height: 20px;
					border-bottom: 1px solid #8a8a8a;
				}
				.tooltip-price {
					font-size: 20px;
					font-weight: 800;
					color: #8a8a8a;
					line-height: 28px;
				}
			}
		}
		@media screen and (max-width: 1199px) {
			.shoppable-image-tooltip {
				&.shoppable-image-tooltip-top {
					transform: translate(-50%, -120%);
				}
				&.shoppable-image-tooltip-left {
					transform: translate(-120%, -50%);
				}
				&.shoppable-image-tooltip-right {
					transform: translate(20px, -50%);
				}
				&.shoppable-image-tooltip-bottom {
					transform: translate(-50%, 20px);
				}
				opacity: 0;
				position: relative;
				z-index: -100;
				min-width: 2rem;
				max-width: 3rem;
				height: auto;
				background: #ffffff;
				border-radius: 0.2rem;
				display: flex;
				padding: 0.2rem;
				flex-direction: column;
				transition: border-color 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
				&:hover {
					opacity: 0.9;
					z-index: 8;
				}
				.tooltip-h1 {
					font-size: 0.18rem;
					font-weight: bold;
					color: #1f1f1f;
				}
				.tooltip-h2 {
					font-size: 0.14rem;
					font-weight: 400;
					color: #8a8a8a;
					border-bottom: 1px solid #8a8a8a;
				}
				.tooltip-price {
					font-size: 0.2rem;
					font-weight: 800;
					color: #8a8a8a;
				}
			}
		}
	}
	&:hover {
		.floating-point-dot-box {
			visibility: visible;
			opacity: 1;
		}
	}
}
</style>
